<template>
    <a-modal v-model:visible="visible" :unmount-on-close="true" :title="stableName + ' 表结构'" draggable
             @cancel="handleCancel" :footer="false" :width="650">

        <a-table :columns="columns" :data="data" column-resizable :bordered="{cell:true}"
                 :scroll="{x: '100%',y: '100%'}" :scrollbar="true" :pagination="false"
                 :size="'small'"></a-table>

    </a-modal>
</template>

<script setup lang="ts">

import {reactive, ref} from 'vue';
import {doQuery} from "../../../scripts/mapper";
import {QueryResult} from "../../../scripts/type";
import {Message} from "@arco-design/web-vue";

const visible = ref(false);
const stableName = ref('');

const columns:any[] = reactive([])
const data:any[] = reactive([])

const show = (stable) => {
    stableName.value = stable;
    visible.value = true;
    doQuery("DESCRIBE " + stable + ";").then((queryResult: QueryResult) => {
        if (queryResult.success && queryResult.data) {
            columns.splice(0, columns.length);
            data.splice(0, data.length);
            queryResult.meta?.forEach((metaItem) => {
                columns.push({
                    title: metaItem.columnName,
                    dataIndex: metaItem.columnName,
                    width: 120
                })
            })
            queryResult.data?.forEach((dataItem: any) => {
                let dataObj = {};
                queryResult.meta?.forEach((metaItem, index) => {
                    dataObj[metaItem.columnName!] = dataItem[index]
                })
                data.push(dataObj)
            })
        } else {
            Message.error("表结构查询失败" + (queryResult.message ? (": " + queryResult.message) : ""))
        }
    })
};

const handleCancel = () => {
    visible.value = false;
}


defineExpose({
    show
})


</script>
